<template>
  <!--  网格日志  -->
  <div class="activity-container-box">
    <ActivityCalendar
        :data="data"
        :width="wid"
        :height="7"
        :colors="activityConfig.colors"
        :cellLength="12"
        :cellInterval="6"
        :cellBorderRadius="1"
        :fontSize="12"
        :showLevelFlag="true"
        :showHeader="false"
        :levelMapper="activityConfig.levelMapper"
        :clickEvent="handleDateClick"
        @mousemove="moveHandler"
    />
<!--  下一步可根据event判断是否是用户点击然后进行判断是否加载相应的当天的提交事件 isTrued  -->
    <transition>
      <p ref="tips" v-show="tipsConfig.show" :style="{left:tipsConfig.x+'px',top:tipsConfig.y+'px'}" class="tips-item">
        发表{{ tipsConfig.count }}篇文章  {{ tipsConfig.text }}
      </p>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, watch} from "vue";
const props = defineProps({
  publicAticles: {
    required:true,
  }
})

interface dataItem {
  count:number,
  date:string
}

let data:any = ref([])
watch(() => props.publicAticles , (newVal,oldVal) => {
  data.value = newVal
})

// llx 70 lx 50  70 / 2156  == 0.03246 比例
let wid = ref<number>(70)


function handleWindowResize() {
  const windowWidth = window.innerWidth;
  if (windowWidth <= 576) {
    // 执行适用于小屏幕的操作
    console.log('小屏幕')
    wid.value = 15
  } else if (windowWidth <= 992) {
    // 执行适用于中等屏幕的操作
    wid.value = 30
  }else if(windowWidth <=1150){
    wid.value = 46
  } else if(windowWidth <= 1250){
    wid.value = 55
  } else if(windowWidth <= 1350){
    wid.value = 20
  } else if (windowWidth <= 1425){
    wid.value = 25
  }else if (windowWidth <=1650){
    wid.value = 30
  } else if (windowWidth <= 1870) {
    wid.value = 40
  }else if (windowWidth <= 1890) {
    wid.value = 50
  } else {
    wid.value = 60
  }
}

onMounted(() => {
  // 监听窗口大小变化事件
  handleWindowResize();
  // window.addEventListener('resize', handleWindowResize);
})


let tips:any = ref(null)
let activityConfig = {
  levelMapper:(count:number) => {
    if (count == 0) {
      return 0;
    } else if (count <= 1) {
      return 1;
    } else if (count <= 3) {
      return 2;
    } else if (count <= 6) {
      return 3;
    } else if (count <= 9) {
      return 4;
    }else {
      return 5
    }
  },
  colors:['#ebedf0','#64de79','#40c463','#026c20','#216e39','#216e39'],
}

let tipsConfig = reactive({
  x:'',
  y:'',
  text:'',
  count:0,
  show:false
})

// 点击每个表格的处理函数
let handleDateClick = ($event:any)=>{
  tipsConfig.text = $event.date
  tipsConfig.count = $event.count
}

let isEnter = false
let timer = null // 自动关闭
let moveHandler = ($event:any) => {
  if($event.target.className == "item" && !isEnter) {
    $event.target.click()
    isEnter = true
    tipsConfig.show = true
    moveTips($event)
  }else if($event.target.className == "item"){
    moveTips($event)
  } else {
    isEnter = false
    tipsConfig.show = false
  }
}
function moveTips($event:any){
  $event.target.click()
  let x = $event.target.offsetLeft
  let y = $event.target.offsetTop
  let w = tips.value.clientWidth
  let h = tips.value.clientHeight
  tipsConfig.x = (x - w / 2 + 5) + ''
  tipsConfig.y = (y - h / 2 - 26) + ''
}

</script>

<style lang="scss" scoped>

.activityCalendar {
  // margin: 0 auto;
  ::v-deep .left {
    width: 50px;
  }
}
.activity-container-box {
  position: relative;
  width: max-content;
  .tips-item {
    width: max-content;
    position: absolute;
    left: 0px;
    padding: 5px 15px;
    background-color: rgba(0,0,0);
    color: #fff;
    transition:left .1s ease-out;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0px 0px 2px 1px #f1f1f1;
    margin-bottom: 0px;
    &:after {
      content: "";
      position: absolute;
      bottom: calc(-100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      border: 10px solid #000;
      border-bottom:10px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
  }
}
</style>
<style>
.isp .activityCalendar .header {
  background-color: #fff !important;
}
</style>
